<template>
  <div class="page">
    <navigation>{{ title }}</navigation>
    <div class="form">
      <input v-model="form.account" type="text" class="form-inp" :placeholder="$t('请输入支付宝账号')">
      <div class="form-tip">{{ $t('请上传支付宝收款码照片') }}</div>
      <label class="form-file">
        <i class="iconfont icon-plus"></i>
        <input type="file" @change="uploadImg">
        <img v-if="qrcodeUrl" class="img" :src="qrcodeUrl" alt="">
        <img v-else class="img" :src="form.qrcode" alt="">
      </label>
    </div>
    <div class="ftbar">
      <button v-if="type === 'edit'" type="button" class="btn del" @click="bandleDelProceed">{{ $t('删除') }}</button>
      <button type="button" class="btn confirm" @click="sendForm">{{ $t('完成') }}</button>
    </div>
  </div>
</template>
<script>
import { mapActions } from 'vuex'
import navigation from '@/components/Navigation.vue'
export default {
  components: { navigation },
  data () {
    return {
      title: this.$t('新建收款信息（支付宝）'),
      form: {},
      type: '',
      qrcodeUrl: ''
    }
  },
  mounted () {
    this.type = this.$route.query.type
    if (this.type === 'edit') {
      this.title = this.$t('修改收款信息')
      this.getProceed({ id: this.$route.query.id })
        .then((data) => {
          this.form = data.data
        })
    }
  },
  methods: {
    ...mapActions({
      getProceed: 'user/getProceed',
      upProceed: 'user/upProceed',
      addProceed: 'user/addProceed',
      delProceed: 'user/delProceed'
    }),
    uploadImg (event) {
      this.form.qrcode = event.target.files[0]
      const reader = new FileReader()
      reader.readAsDataURL(this.form.qrcode)
      reader.onload = (evt) => {
        this.qrcodeUrl = evt.target.result
      }
    },
    sendForm () {
      if (this.loading) { return false }
      const payload = new FormData()
      do {
        if (!this.form.account) {
          this.errmsg = this.$t('请输入支付宝账号')
          break
        }
        payload.append('account', this.form.account)
        if (!this.form.qrcode) {
          this.errmsg = this.$t('请上传支付宝收款码照片')
          break
        }
        if (!this.qrcodeUrl) {
          payload.append('qrcode', this.dataURLtoFile(this.getBase64Image(this.form.qrcode), 'qrcode'))
        } else {
          payload.append('qrcode', this.form.qrcode)
        }
      } while (false)
      if (this.errmsg) {
        this.$toast.error(this.errmsg)
        this.errmsg = ''
        return
      }
      if (this.form.id) {
        payload.append('id', this.form.id)
      }
      this.loading = true
      payload.append('proceeds_type', 'alipay')
      this[this.type + 'Payment'](payload)
    },
    editPayment (payload) {
      this.upProceed(payload)
        .then((data) => {
          this.$toast.success(data.message)
          this.$router.back()
        })
        .catch((data) => {
          this.$toast.error(data.message)
        })
        .finally((data) => {
          this.loading = false
        })
    },
    addPayment (payload) {
      this.addProceed(payload)
        .then((data) => {
          this.$toast.success(data.message)
          this.$router.back()
        })
        .catch((data) => {
          this.$toast.error(data.message)
        })
        .finally((data) => {
          this.loading = false
        })
    },
    bandleDelProceed () {
      if (this.loading) { return false }
      const payload = {
        id: this.form.id
      }
      this.loading = true
      this.delProceed(payload)
        .then((data) => {
          this.$toast.success(data.message)
          this.$router.back()
        })
        .catch((data) => {
          this.$toast.error(data.message)
        })
        .finally((data) => {
          this.loading = false
        })
    },
    getBase64Image (img) {
      const demoCanvas = document.getElementById('demoCanvas')
      demoCanvas.width = img.width
      demoCanvas.height = img.height
      const ctx = demoCanvas.getContext('2d')
      ctx.drawImage(img, 0, 0, 300, 150)
      const ext = img.src.substring(img.src.lastIndexOf('.') + 1).toLowerCase()
      const dataURL = demoCanvas.toDataURL('image/' + ext)
      return {
        dataURL,
        type: 'image/' + ext
      }
    },
    dataURLtoFile (dataurl, filename) {
      const arr = dataurl.dataURL.split(','); const mime = arr[0].match(/:(.*?);/)[1]
      const bstr = atob(arr[1]); let n = bstr.length; const u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new File([u8arr], filename, { type: mime })
    }
  }
}
</script>
<style scoped>
.form {
  background-color: #fff;
  padding-bottom: 40px;
}
.form-inp {
  padding: 10px 15px;
  font-size: 14px;
  display: block;
  width: 100%;
  line-height: 30px;
  box-sizing: border-box;
  border-top: 10px solid #efefef;
}
.form-tip {
  line-height: 40px;
  padding: 0 15px;
  color: #888888;
  background-color: #efefef;
}
.form-file {
  position: relative;
  display: block;
  margin: 15px;
  border: 1px solid #eee;
  width: 50vw;
  height: 68vw;
  font-size: 0;
}
.form-file input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
}
.form-file .iconfont {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 20px;
  margin: -10px 0 0 -10px;
  color: #666;
}
.form-file:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 100%;
}
.form-file .img {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
  max-height: 100%;
}
.ftbar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ftbar .btn {
  flex: 1 0 0;
  line-height: 40px;
  height: 40px;
  font-size: 16px;
}
.ftbar .btn.confirm {
  background: #1b8afe;
  color: #fff;
}

</style>
